<template>
  <div class="container">
    <!--权限自定义指令演示-->
    <div>
      <el-button type="primary" v-permission="{ path: 'Panda.Net.Basic.Users.Create' }">有权限</el-button>
      <el-button type="primary" v-permission="{ path: 'Panda.Net.Basic.Users.Create.www' }">没有有</el-button>
    </div>
    <!--防抖自定义指令演示-->
    <div>
      <el-button type="primary" v-debounce:1000="onDebounce">防抖500ms</el-button>
    </div>
    <!--节流自定义指令演示-->
    <div>
      <el-button type="primary" v-throttle:5000="onThrottle">节流5s</el-button>
    </div>
    <!--tsx演示-->
    <div>
      <Baz msg="测试传入参数" class="my-class" @update:msg="msg">
        默认插槽
        <template #header>有名称的</template>
      </Baz>

      <Zax></Zax>
    </div>

    <!--阴影演示-->
    <el-card class="box-shadow-ys"></el-card>
    <!--菜的树演示-->
    <div>
      <el-tree class="el-tree" :data="routeList" :render-content="renderContent" show-checkbox node-key="id" ref="tree"
        :default-expanded-keys="[1, 2, 3]" highlight-current @node-expand="handleExpand"
        :props="defaultProps"></el-tree>
    </div>

    <!--工作流数据解析-->
    <div>
      <Workflow />
    </div>
  </div>
</template>
<script setup lang="ts">
import Baz from '@/views/baz/baz';
import Zax from '@/views/baz/zax';
import { ElMessage } from 'element-plus';
import { onMounted, nextTick } from 'vue';
import { enumToList } from '@/utils/enum';
import Workflow from './workflow.vue';
import { detectChanges } from '@/utils/dataChangeDetector';

type User = {
  id: number;
  name: string;
  age?: number;
};

const oldUser: User[] = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 9, name: '王五', age: 15 },
];

const newUser: User[] = [
  { id: 1, name: '张三1' },
  { id: 3, name: '王五' },
  { id: 9, name: '王五' },
  { id: 8, name: '王五' },
];

const result = detectChanges<number, User>(oldUser, newUser);
console.log(result);



const msg = (val: string) => {
  // console.log(val);
};
const defaultProps = {
  children: 'children',
  label: 'label'
};

const onDebounce = () => {
  ElMessage('防抖1000ms防止无限点击');
};

const onThrottle = () => {
  ElMessage('节流5000ms防止无限请求');
};
interface Tree {
  id: number;
  label: string;
  isFloat?: boolean;
  children?: Tree[];
}

const routeList: Array<Tree> = [
  {
    id: 1,
    label: '京店宝',
    children: [
      {
        id: 2,
        label: '用户分析',
        children: [
          {
            id: 4,
            label: '查询次数',
            children: [
              {
                id: 7,
                label: '页面查看权限',
                isFloat: true
              },
              {
                id: 7,
                label: '页面查看权限',
                isFloat: true
              },
              {
                id: 7,
                label: '页面查看权限',
                isFloat: true
              },
              {
                id: 7,
                label: '页面查看权限',
                isFloat: true
              },
              {
                id: 8,
                label: '编辑',
                isFloat: true
              }
            ]
          },
          {
            id: 5,
            label: '次数分布',
            children: [
              {
                id: 9,
                label: '次数分布child1'
              },
              {
                id: 10,
                label: '次数分布child2'
              }
            ]
          }
        ]
      },
      {
        id: 3,
        label: '系统性能',
        children: [
          {
            id: 6,
            label: '所用时间',
            children: [
              {
                id: 7,
                label: '页面查看权限'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 111,
    label: '有品库',
    children: [
      {
        id: 112,
        label: '用户数'
      }
    ]
  }
];

const changeCss = () => {
  let levelNames = document.getElementsByClassName('foo'); // levelname是上面的最底层节点的名字
  for (let i = 0; i < levelNames.length; i++) {
    // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
    let levelName = levelNames[i].parentNode as HTMLElement;
    levelName.style.cssFloat = 'left'; // 最底层的节点，包括多选框和名字都让他左浮动
    //levelName.style.width = '240px'
  }
};

const renderContent = (
  h: any,
  {
    data
  }: {
    data: Tree;
  }
) => {
  //树节点的内容区的渲染 Function
  let classname = '';
  // 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
  if (data.isFloat) {
    classname = 'foo';
  }
  return h(
    'div',
    {
      class: classname
    },
    data.label
  );
};

const handleExpand = () => {
  //节点被展开时触发的事件
  //因为该函数执行在renderContent函数之前，所以得加this.$nextTick()
  nextTick(() => {
    changeCss();
  });
};

enum Type {
  One = 0,
  Two = 1,
  Three = 2
}

enum Type1 {
  One = 'A',
  Two = 'x',
  Three = 'Y'
}
const typeDict = new Map([
  [Type.One, '第一'],
  [Type.Two, '第二'],
  [Type.Three, '第三']
]);
const type1Dict = new Map([
  [Type1.One, '第一'],
  [Type1.Two, '第二'],
  [Type1.Three, '第三']
]);

function enumTest() {
  const types1 = enumToList(Type1);
  for (let item of types1) {
    // console.log(item.value);
    // console.log(type1Dict.get(item.value as Type1));
  }
  // console.log(types1);

  const types = enumToList(Type);
  for (let item of types) {
    // console.log(item.value);
    // console.log(typeDict.get(item.value as Type));
  }
  // console.log(types);
}
onMounted(() => {
  enumTest();

  changeCss();
});
</script>
<style lang="scss" scoped>
.container {
  width: 800px;
  padding: 40px;
}

.routeList-box {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  margin-bottom: 20px;

  .el-tree {
    margin: 12px 0;
  }

  .el-collapse-item__header {
    height: 40px;
    background-color: #f4f4f4;
    padding: 0 10px;
  }

  .el-icon-arrow-right:before {
    color: #409eff;
  }
}

.el-tree-node__content::before {
  content: '';
  padding-left: 10px;
}

.el-checkbox__input {
  margin-right: 6px;
}

div {
  margin-bottom: 15px;
}

.box-shadow-ys:hover {
  box-shadow:
    0 1px 2px -2px rgba(0, 0, 0, 0.16),
    0 3px 6px 0 rgba(0, 0, 0, 0.12),
    0 5px 12px 4px rgba(0, 0, 0, 0.09);
}

.box-shadow-ys {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
}
</style>
